<template>
  <div>
    <Layout :title="'商品列表'" :flag="true" :tabBarShow="false">
      <Search></Search>
      <van-tabs v-model="active">
        <van-tab title="人气" class="add">
          <Commodity @click.native="gotoLK(item.goods_id)" v-for="item in goods" :key="item.goods_id" :name="item.goods_name" :price="item.goods_price" :delPrice="item.goods_price">
          </Commodity>
        </van-tab>
        <van-tab title="销量">内容 2</van-tab>
        <van-tab title="价格">内容 3</van-tab>
      </van-tabs>
    </Layout>
  </div>
</template>

<script>
import Commodity from '@/components/Commodity.vue'
import request from '@/request/request.js'
import bus from '@/utils/eventBus.js'
import Search from '@/components/Search.vue'

export default {
  // 定义属性
  data() {
    return {
      active: 0,
      // 商品页数
      pagenum: 9,
      // 每次请求多少条数据
      pagesize: 20,
      // 商品
      goods: []
    }
  },
  // 方法集合
  methods: {
    async initCommodityList() {
      // const { data: res } = await this.$http(
      //   this.$api.goods.getList({
      //     pagenum: this.pagenum,
      //     pagesize: this.pagesize
      //   })
      // )
      const { data: res } = await request.get('goods', {
        params: {
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      })
      // console.log(res)
      this.goods = res.data.goods
      // console.log(this.goods)
    },
    // sendBackPage() {},
    gotoLK(id) {
      console.log(id)
      // sendBackPage()
      // bus.$emit('share', true)
      this.$router.push('/comInfo')
    }
  },
  components: {
    Commodity,
    Search
  },
  created() {
    this.initCommodityList()
  }
}
</script>

<style lang='less' scoped>
.add {
  display: flex;
  flex-flow: wrap;
}
</style>